<script setup lang="ts">
import { onMounted, ref } from "@vue/runtime-core"
import axios from "axios"


const items = ref();

let index = ref(0);

let goDetail = (id: number) => {
  // console.log(id);
  index.value = id;
};

let load = ref(true);



onMounted(() => {
  axios
    .get(`https://apis.netstart.cn/mogujie/live/tabHeader`)
    .then(({ data }) => {
      items.value = data.data.tabs.items;
      // console.log(data.data.tabs.items);
      load.value = false;
    });
});
</script>

<template>
  <div>
    <div class="live-bar" v-if="load == false">
      <div class="live-bar-name" :class="{ active: index == -1 }" @click="goDetail(-1)">
        关注
      </div>

      <div v-for="(item, i) in items" :key="item.id" class="live-bar-name" :class="{ active: index == i }"
        @click="goDetail(i)">
        {{ item.name }}
      </div>
    </div>
    <ConcernView v-if="index == -1" />
    <HotView v-if="index == 0" />
    <WearView v-if="index == 1" />
    <CostumeView v-if="index == 2" />
    <div class="loading">
      <!-- <van-loading size="24px" vertical v-if="load == true">加载中...</van-loading> -->
      <!-- <van-loading type="spinner" size="80px" color="black" v-if="load == true" /> -->
    </div>
  </div>
</template>

<style lang="scss" scoped>
.live-bar {
  border-bottom: 2px solid #eee;
  user-select: none;
  display: flex;
  justify-content: space-around;

  .live-bar-name {
    text-align: center;
    height: 55px;
    line-height: 55px;
    color: black;
  }

  .live-bar-name.active {
    border-bottom: 2px solid red;
  }
}
</style>
